<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		li{list-style:none;}
		body{
			color:#333;
			font-size: 14px;
		}
		a{color:#333;text-decoration: none;}
		.top{
			height:42px;
			line-height:42px;
			position:absolute;
			width: 100%;
			background-color:rgba(255,255,255,.5);
		    box-shadow: 0 1px 2px rgba(0,0,0,.1);
			font-size: 12px;
		}
		.top a{
			display: block;
			padding:0 15px;
		}

		.top .content > li{
			float:left;
			position:relative;
		}
		.banner img{
			width: 100%;
		}
		.content{
			width: 1160px;
			margin:0 auto;
		}
		.top .content > li:hover{
			background-color:rgba(255,255,255,.7);
		}
		.sec-nav{
			width: 454px;
			height: 242px;
			padding:12px 0 0 12px;
			border-radius: 0 0 4px 4px;
			box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
			background-color: #fff;
			position:absolute;
			top:42px;
			left:0;
			display: none;
		}
		.top li:hover .sec-nav{
			display: block;
		}
		.left{
			width:240px;
			float:left;
		}
		.left ol{
			overflow:hidden;
			margin-top: 7px;
		}
		.left ol a{
			height:107px;
		}
		.left ol img{
			width: 64px;
			height: 64px;
		}
		.left li{
			float:left;
			text-align: center;
		}
		.sec-nav a{
			padding:0;
			display: block;
		}
		.mg{margin:0 24px;}
		.left .big{
			height:128px;
		}
		.left p{
			line-height:10px;
		}
		.right{
			float:right;
			width: 200px;
			background-image:url(line.png);
			background-repeat:no-repeat;
		}
		.right .title{display: block;}
		.right a{
			padding-left:15px;
			margin-left:5px;
		}
		.right li{
			line-height:29px;
		}
		.right a:hover{
			background-color:rgba(0,0,0,.1);
		}
		.right li img{
			position:absolute;
			bottom:0;
			left:455px;
			display: none;
		}
		.right li:hover img{
			display: block;
		}
	</style>
</head>
<body>
	<div class="top">
		<ul class="content">
			<li><a href="#">主站</a></li>
			<li><a href="#">音频</a></li>
			<li>
				<a href="#">游戏中心</a>
				<div class="sec-nav">
					<div class="left">
						<a href="#" class="big"><img src="0bef96c51c8c0a9aa01a5ff24c44ffde0178db78.jpg" alt=""></a>
						<ol>
							<li>
								<a href="#">
									<img src="e0a756f4470a91c2d4850be621512fb84e497ed4.png" alt="">
									<p>命运-冠</p>
								</a>
							</li>
							<li class="mg">
								<a href="#">
									<img src="abfe03ca09e2051e5edc2693499f5db4d72e0e79.png" alt="">
									<p>英雄传</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="1c7ed9dbaf88c0531e983933a8e3ee7c916095ec.png" alt="">
									<p>BANG</p>
								</a>
							</li>
						</ol>
					</div>
					<div class="right">
						<img src="title.png" class="title" alt="">
						<ul>
							<li>
								<a href="#">Dead Cells</a>
								<img src="10dc2aa23378bed22310033e574e57b789db1365.png" alt="">
							</li>
							<li>
								<a href="#">无法触碰的掌心</a>
								<img src="8c7875f663bb7d7bc5c25fbdc1121de48a4bfdfe.png" alt="">
							</li>
							<li>
								<a href="#">龙族幻想</a>
								<img src="44a8535120e6f29dd8a1e0f128ad3f2669b84bd4.png" alt="">
							</li>
							<li>
								<a href="#">皇家骑士</a>
								<img src="3684e8b38f42a773bdf9bf4fc5ad5324f7725f91.png" alt="">
							</li>
							<li>
								<a href="#">闪耀暖暖</a>
								<img src="a4a1f1e997af3f93662e0472e64e4265f76e3d85.png" alt="">
							</li>
							<li>
								<a href="#">原神</a>
								<img src="bcb9b505dd8ecd4f14dd881924c0dcd5f8e4132c.png" alt="">
							</li>
							<li>
								<a href="#">我的勇者</a>
								<img src="f22816c7ab8d7de4c860204d1d3e3c0422f15aef.png" alt="">
							</li>
						</ul>
					</div>
				</div>
			</li>
			<li><a href="#">直播</a></li>
			<li><a href="#">会员购</a></li>
			<li><a href="#">漫画</a></li>
			<li><a href="#">BML</a></li>
			<li><a href="#">70年</a></li>
			<li><a href="#">下载APP</a></li>
		</ul>
	</div>
	<div class="banner">
		<img src="banner.png"alt="">
	</div>
</body>
</html>